<template>
  <div class="bx--grid bx--grid--full-width bx--grid--no-gutter repo-page">
  <!-- <div class="bx--grid bx--grid--full-width repo-page"> -->
  
    <div class="bx--row repo-page__r1">
      <div class="bx--col-lg-16">
        <repo-table
          :headers="headers"
          :rows="pagedRows"
          :totalRows="rows.length"
          @pagination="onPagination"
          :loading="loading"
          :canAdd="false"
          :canRemove="false"
          title="Carbon Repositories"
          helperText="A collection of public Carbon repositories."
        /> 
      </div>     
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
import RepoTable from "./RepoTable";
import commonJS from "../../js/CommonJS";
const headers = [
  {
    key: 'name',
    header: 'Name',
  },
  {
    key: 'createdAt',
    header: 'Created',
  },
  {
    key: 'updatedAt',
    header: 'Updated',
  },
  {
    key: 'issueCount',
    header: 'Open Issues',
  },
  {
    key: 'stars',
    header: 'Stars',
  },
  {
    key: 'links',
    header: 'Links',
  },
  {
    key: '',
    header: '',
  },  
];

export default {
  name: 'RepoPage',
  components: { RepoTable },
  data() {
    return {
      headers,
      loading:true,
      pageSize: 0,
      pageStart: 0,
      page: 0,
      totalRows:0
    };
  },
  methods: {
    //https://vuex.vuejs.org/guide/actions.html#dispatching-actions
    ...mapActions({
        getRepo: "getOrganizationsAction"
    }),   
    onPagination(val) {
      console.log("onPagination",val);
      this.pageSize = val.length;
      this.pageStart = val.start;
      this.page = val.page;
    }
  },  
  computed: {
    //https://vuex.vuejs.org/guide/getters.html#the-mapgetters-helper
    // ...mapState([{organization:"organizations"}]), 
    ...mapState(["organizations"]), 
    rows() {
      let orgNames=[];
      this.organizations.forEach(item =>orgNames.push(item.name));
      console.log("orgNames",orgNames);
      if (!this.organizations) {
        return [];
      } else {
        console.log("this.organization",this.organizations);
        let newRows=this.organizations;
        return newRows;
      }
    },
    pagedRows() {
      return this.rows.slice(this.pageStart-1, this.pageStart + this.pageSize-1);
    },    
  },
  async mounted(){
    let self=this;
    await this.getRepo();
    await commonJS.sleep(function(){
      self.loading=false;
    },1000,null);    
  } 
};
</script>

<style lang="scss" scoped>
@import '../../styles/carbon-utils';

/deep/ .repo-page .bx--row {
  padding-top: $spacing-05;
  padding-bottom: $spacing-05;
}

</style>